<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>教务数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="../css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="../css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="../css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(3){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="../js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>教务数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>全年学员异动</b></div>
                </div>
            </div>
            <div class="layui-card-body" style="margin-left: 30%">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class=" layui-row" style="margin-top: 20px">
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">年份选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz2">
                                    <option value="" selected="">2018年</option>
                                    <option value="1" >2017年</option>
                                    <option value="2">2016年</option>
                                </select>
                            </div>
                        </div>
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">校区选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz3">
                                    <option value="" selected="">普陀校区</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;">
                <li class="active">
                    <a href="#chart1" data-toggle="tab"><span style="display: inline-block;background:orange;height: 10px;width: 10px;border-radius: 50px;margin-right: 10px;"></span>休学</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()"><span style="display: inline-block;background:#16b8be;height: 10px;width: 10px;border-radius: 50px;margin-right: 10px;"></span> 转班</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
var dom = document.getElementById("container");
//自适应宽高
var myChartContainer = function () {
    dom.style.width = window.innerWidth-160+'px';
    // dom.style.height = window.innerHeight+'px';
};

myChartContainer();

var myChart = echarts.init(dom);
var app = {};   
option = null;
app.title = '坐标轴刻度与标签对齐';

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['转班','休学']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    axisPointer: { // 会出现横竖2个方向的指示器
        show: true,
        type: 'line',
        label:{
            show: false, //不显示指示器的文本标签
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: ['20%','20%'],
        data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
        axisLabel: {        
                    show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                      textStyle: {
                          color: '#666',   //x轴上的字体颜色
                          fontSize:'16'    // x轴字体大小
                      }
                  },
        axisLine:{
                show:false
            },
        axisTick: {
            show: false
            }, 
    },
    yAxis: {
        type: 'value',
        name:'人数（个）',    
        nameTextStyle:{
                fontSize:16,  
                padding:30
            },    
        data:["0","50","100","150","200","250","300"],
        axisLabel: {        
                    show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                      textStyle: {
                          color: '#666',   //x轴上的字体颜色
                          fontSize:'16'    // x轴字体大小
                      }
                  },
        axisLine:{
                show:false
            },
        axisTick: {
            show: false
            }, 
        offset:20, 
                 
    },
    series: [
        {
            // name:'转班',
            type:'line',
            data:[100, 150, 140, 160, 170, 240, 220,330,270,260,320,250],
            itemStyle : {
                            normal : {
                                color:"#fff",
                                borderWidth:5,
                                borderColor:"#16b8be",
                                lineStyle:{
                                    color:'#16b8be',
                                    width:5
                                }
                            }
            },
            symbol:"circle",
            symbolSize:22,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            // name:'休学',
            type:'line',
            data:[330,320,260,270,330,220,240,170,160,140,40,170],
            itemStyle : {
                            normal : {
                                color:"#fff",
                                borderWidth:5,
                                borderColor:"orange",
                                lineStyle:{
                                    color:'orange',
                                    width:5                                    
                                }
                            }
            },
            symbol:"circle",
            symbolSize:22,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'circle',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}


 //浏览器大小改变时重置大小
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};
</script>
<script src="../js/layui.all.js"></script>
</html>